<template>
  <el-dialog title="新建" :visible.sync="dialogVisible" width="40%" @close="onClose()" v-draggable>
    <div>
      <span class="my_span">选择设备</span>
      <el-select v-model="deviceVal" filterable placeholder="请选择" class="ml-3" :disabled="type == 1" @change="getList()">
        <el-option v-for="item in options" :key="item.deviceCode" :label="item.deviceName" :value="item.deviceCode"> </el-option>
      </el-select>
    </div>
    <el-table :data="tableData" border class="my_table" height="40vh" @selection-change="handleSelectionChange" ref="multipleTable">
      <el-table-column prop="parameterName" label="参数名称" align="center"> </el-table-column>
      <el-table-column prop="parameterCode" label="参数代码" align="center"> </el-table-column>
      <el-table-column prop="parameterValue" label="参数值" align="center"> </el-table-column>
      <el-table-column prop="parameterValueName" label="参数值名称" align="center"> </el-table-column>
      <el-table-column type="selection" width="70" align="center"> </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSave()">保存看板</el-button>
      <el-button type="danger" @click="onDel()">{{ type == 0 ? '取 消' : '删除看板' }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import axios from 'axios'
import { queryDeviceRealDataInfo, insertDeviceCenterOne, deleteDeviceCenterOne, updateDeviceCenterOne } from '@/api/settingManagement/kanbanManagement'

export default {
  data() {
    return {
      deviceVal: '',
      options: [],
      tableData: [],
      type: 0, //0是新增，1是修改/删除
      id: '',
      dialogVisible: false,
      multipleSelection: [],
      selectData: []
    }
  },
  methods: {
    getList(data) {
      if (this.deviceVal == '') return false
      queryDeviceRealDataInfo({
        deviceCode: this.deviceVal
      }).then((res) => {
        this.tableData = res.object
        this.toggleSelection(data)
      })
    },
    // 保存
    onSave() {
      if (this.multipleSelection.length == 0) return this.$message.error('请选择数据！')
      let url = ''
      this.multipleSelection.map((item, index) => {
        if (index == 0) {
          url += item
        } else {
          url += '&' + item
        }
      })
      let obj = {
        params: url
      }
      if (this.type == 0) {
        obj['deviceCode'] = this.deviceVal
      } else {
        obj['id'] = this.id
      }
      let result = this.type == 0 ? insertDeviceCenterOne : updateDeviceCenterOne
      result(obj).then((res) => {
        if (res.status == 200) {
          this.$message({
            message: res.message,
            type: 'success'
          })
          this.onClose()
          this.$emit('refresh')
        }
      })
    },

    onDel() {
      if (this.type == 1) {
        deleteDeviceCenterOne({
          id: this.id
        }).then((res) => {
          if (res.status == 200) {
            this.$message({
              message: res.message,
              type: 'success'
            })
            this.onClose()
            this.$nextTick(() => {
              this.$emit('refresh')
            })

          }
        })
      } else {
        this.onClose()
      }
    },

    handleSelectionChange(val) {
      this.multipleSelection = val.map((item) => item.parameterCode)
    },

    toggleSelection(data) {
      if (data) {
        this.selectData = []
        data.forEach((val) => {
          this.tableData.forEach((item) => {
            if (item.parameterName == val.name) {
              this.selectData.push(item)
            }
          })
        })

        this.selectData.forEach((row) => {
          this.$nextTick(() => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },

    onClose() {
      this.deviceVal = ''
      this.options = []
      this.tableData = []
      this.id = ''
      this.dialogVisible = false
      this.multipleSelection = []
    }
  }
}
</script>
<style scoped lang="scss">
::v-deep .el-dialog {
  border-radius: 8px;

  .el-dialog__footer {
    text-align: center !important;
  }
}

::v-deep .el-dialog__header {
  border-radius: 8px 8px 0 0;
  background-color: #e6e6e6;
}

.ml-3 {
  margin-left: 12px;
}

.my_span {
  font-size: 16px;
}

.my_table {
  margin-top: 16px;
}

.dialog-foote {
  text-align: center;
}

// ::v-deep .el-table {

//     tr th {
//         background-color: #e6e6e6;
//         border-right: none;
//     }
// }
</style>
